<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#aaa{
				width: 50px;
				height: 50px;
				background-color: #008000;
			}
			#bbb{
				width: 50px;
				height: 50px;
				background-color: aqua;
			}
			#ccc{
				width: 50px;
				height: 50px;
				background-color:red;
			}
			
			#aaaa{
				width: 300px;
				height: 300px;
				background-color:red;
			}
			
			#yd{
				width: 100px;
				height: 100px;
				background-color: bisque;
			}
		</style>
	</head>
	<body>
		<!-- 1.按钮和DIV的单击事件（三种绑定方式）
		2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式）
		3.登入页面
		用户名输入框，
		密码输入框，
		提交按钮
		
		任务   3.1 用户名框获取焦点事件，控制台输出：用户在输入名称
		         3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名
		         3.3  密码框获取焦点事件，控制台输出：用户在输入密码
		         3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码
		         3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
		              密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’
		4.实现DIV移动事件，采用监听器方式操作，可实现添加和清除监听器功能。 -->
		
		<button type="button" onclick="aa();">按钮aa</button>
		<button type="button" id="bb1">按钮bb</button>
		<button type="button" id="cc1">按钮cc</button>
		
		<div id="aaa" onclick="aaa1();">	
		</div>
		<div id="bbb">
		</div>
		<div id="ccc">
		</div>
		
		<div id="aaaa" onmouseenter="aaaa1();" onmousemove="aaaa2();" onmouseleave="aaaa3();">
		</div>
		
		
		</div>
		用户名：<input type="" name="" id="name" value="" onfocus="uu1();" onblur="uu2();"/>
		密码：<input type="" name="" id="pass" value="" onfocus="pp1();"  onblur="pp2();"/>
		<button type="button" id="name" id="pass"  onclick="jj1();">提交</button>
		<div id="yd">
			<br />
			<br />
		
			<br />
			<br />
			<br />
			
		<button type="button"  onclick="add1();">添加监视器</button>
		<button type="button" onclick="qingcu1();">清除监视器</button>
			
			
	</body>
	
	<script type="text/javascript">
		function aa(){
			console.log('按钮aa被点击了');
		}
		function bb(){
			console.log('按钮bb被点击了');
		}
		function cc(){
			console.log('按钮cc被点击了');
		}
		document.getElementById('bb1').onclick=bb;
		// document.getElementById('bb1').onclick=function(){
		// 	console.log('按钮bb被点击了');
		// }
		document.getElementById('cc1').addEventListener('click',cc);
		// document.getElementById('cc1').addEventListener('click',function(){
		// 	console.log('按钮cc被点击了');
		// })
		function aaa1(){
			console.log('绿色被点击了');
		}
		function bbb1(){
			console.log('蓝色被点击了');
		}
		function ccc1(){
			console.log('红色被点击了');
		}
		document.getElementById('bbb').onclick=bbb1;
		document.getElementById('ccc').addEventListener('click',ccc1);
	
		function aaaa1(){
			console.log('进入事件');
		}
		function aaaa2(){
			console.log('移动事件');
		}
		function aaaa3(){
			console.log('离开事件');
		}
		// 2.2
		// document.getElementById('aaaa').onmouseenter=aaaa1;
		// document.getElementById('aaaa').onmousemove=aaaa2;
		// document.getElementById('aaaa').onmouseleave=aaaa3;
		// 2.3
		// document.getElementById('aaaa').addEventListener('mouseenter',aaaa1);
		// document.getElementById('aaaa').addEventListener('mousemove',aaaa2);
		// document.getElementById('aaaa').addEventListener('mouseleave',aaaa3);
		function uu1(){
			console.log('用户在输入名称');
		}
		function uu2(){
			if (document.getElementById('name').value=='') {
				alert('没有输入用户名');
			} 
		}
		function pp1(){
			console.log('用户在输入密码');
		}
		function pp2(){
			if (document.getElementById('pass').value=='') {
				alert('没有输入密码');
			}
		}
		function jj1(){
			if((document.getElementById('name').value=='')&&(document.getElementById('pass').value=='')){
				alert('用户名和密码为空');}
			else if (document.getElementById('name').value=='') {
				alert('用户名为空');
			} else if(document.getElementById('pass').value==''){
				alert('密码为空');
			}else{
				alert('登录成功');
			}
		}
		function dddd(){
			console.log('我动了')
		}
		function add1(){
			document.getElementById('yd').addEventListener('mousemove',dddd)
		}
		function qingcu1(){
			document.getElementById('yd').removeEventListener('mousemove',dddd)
		}
	</script>
</html>
